<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue</title>
</head>
<script src="vue.js"></script>
<body>

    <div id="app">
        <li v-for="v in students">
            {{v.name}}-->{{v.sex}}
        </li>
        {{type}}
        <input type="radio" v-model="type" value="boy"> 男孩
        <input type="radio" v-model="type" value="girl"> 女孩
    </div>

<script>
    var app=new Vue({
        el:'#app',
        computed:{
            students(){
                if (this.type=='all'){
                    return this.user;
                }else {
                    return this.user.filter((v)=>{
                        //alert(this.type);
                        return v.sex==this.type;
                    });
                }
            }
        },
        data:{
            type:'all',
            user:[
                {name:'后端君',sex:'boy'},
                {name:'前端申',sex:'boy'},
                {name:'走丽水',sex:'girl'}
            ]
        }
    });

</script>
</body>
</html>